<template>
	<view class="phone-page">
		<!-- <u-navbar title="登录" :background="background" back-icon-color="#fff" title-color="#fff"></u-navbar> -->
		<view class="phone-content">
			<view class="phone-top">
				<u-form :model="form" ref="uForm">
					<u-form-item label-width="0" prop="phone"><u-input v-model="form.phone" placeholder="请输入手机号码" placeholder-style="color:#999" /></u-form-item>
					<u-form-item label-width="0" prop="code">
						<view class="phone-code-box">
							<u-input v-model="form.code"  placeholder-style="color:#999"  placeholder="请输入短信验证码" />
							<view class="code-btn-box">
								<view :class="['phone-code-btn','getcode-btn',phoneCan?'can':'dis',codeLoading?'codeLoading':'']" v-if="time<0" @click="getCode">获取动态码</view>
								<view class="phone-code-btn time-btn" v-else>倒计时{{time}}s</view>
							</view>
						</view>
					</u-form-item>
				</u-form>
			</view>
			<view class="phone-btn-box">
				<view :class="['phone-login-btn',loginCan?'':'phone-login-btn-dis']" @click="goHome">登录</view>
				<!-- #ifdef MP-WEIXIN -->
				<button :loading="loading" :disabled="loading" :custom-style="customStyle" class="phone-wx-quick" open-type="getPhoneNumber" @getphonenumber="bindPhone">微信用户一键登录</button>
				<!-- #endif -->
				<!-- <view class="phone-wx-quick"></view> -->
			</view>
		</view>
		<u-mask :show="showMask" z-index="998">
			<view class="maskContent">
				<!-- #ifdef MP-WEIXIN -->
				<view class="maskTitle">提示</view>
				<view class="maskWords">获取您的微信昵称、头像等信息</view>
				<view class="maskBtnBox">
					<view class="maskBtn maskBtnCancle" @click="goPageHome">取消</view>
					<view class="maskBtn maskBtnSure">
						<u-button :loading="userLoading" :disabled="userLoading" :custom-style="userCustomStyle" class="user-btn" open-type="getUserInfo" @getuserinfo="loginMP">同意</u-button>
					</view>
				</view>
				<!-- #endif -->
			</view>
		</u-mask>
	</view>
	
</template>

<script>
	import { mapActions } from 'vuex';
	export default {
		data() {
			return {
				phoneCan:false,
				codeLoading:false,
				title: 'Hello',
				form: {
					phone:'',
					code:''
				},
				rules: {
					code: [
						{
							required: true,
							message: '请输入验证码',
							trigger: ['blur', 'change'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								let regu = /^\d{6}$/; 
								if (regu.test(value)) {
									return true
								} else {
									return false
								}
							},
							message: '验证码格式不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					phone:[
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								this.phoneCan = this.$u.test.mobile(value)
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					]
				},
				time:'-1',
				loading:false,
				loginCan:true,
				showMask:false,
				userLoading:false,
				userCustomStyle:{
					height:'80rpx',
					borderRadius: '8rpx',
					width:'180rpx',
					fontSize: '34rpx',
					lineHeight: '80rpx',
					textAlign: 'center',
					color:'#fff',
					backgroundColor: '#00CBCB'
				}
			}
		},
		onLoad() {
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			...mapActions(['ActLoginWx','ActGetPhoneCode']),
			getCode(){
				if (this.phoneCan&&!this.codeLoading) {
					// this.codeLoading = true
					this.getPhoneCode({phone:this.form.phone})
				} else if (!this.phoneCan) {
					// this.$refs.uToast.show({
					// 	title: '请输入正确的手机号',
					// 	type: 'error'
					// })
				}
			},
			goHome(){
				if (this.loginCan) {
					this.$refs.uForm.validate(valid => {
						if (valid) {
							console.log('验证通过');
							let param = {
								mobile: this.form.phone,
								smsCode: this.form.code,
								grant_type: 'member_sms_code',
								scope: 'all',
								tenantId: '000',
							}
							this.loginCan = false
							this.login(param,true)
						}
					});
				}
			},
			async getPhoneCode(param) {
				const res = await this.ActGetPhoneCode(param);
				if (res) {
					this.time = 59
					// this.codeLoading = false
					if (timer) {
						clearInterval(timer)
					}
					let timer = setInterval(()=>{
						this.time = this.time - 1
						if (this.time<0) {
							clearInterval(timer)
						}
					},1000)
				}
			},
			// 绑定手机号码
			async bindPhone(e) {
				this.loading = true
				let _this = this
				if (e.detail.iv) {
					// #ifdef MP-WEIXIN
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							_this.code = loginRes.code;
							let param = {
								"iv": e.detail.iv,
								"encryptedData": e.detail.encryptedData,
								code: _this.code,
								grant_type: 'wechatApp',
								scope: 'all',
								tenantId: '000',
							}
							_this.login(param)
						},
					})
					// #endif
				} else{
					this.loading = false
				}
			},
			async login(param,type){
				const res = await this.ActLoginWx(param);
				if (type) {
					this.loginCan = true
				}
				if (res.access_token) {
					// #ifdef MP
					//如果是小程序  例如显示返回按钮
					this.showMask = true
					// #endIf
					// #ifdef H5
					this.$u.route({
						url: 'pages/index/home',
						type:'reLaunch'
					})
					// #endIf
				}
			},
			loginMP(){
				let _this = this
				this.userLoading = true
				uni.getUserInfo({
					provider:"weixin",
					success(userInfo) {
						uni.setStorageSync('wxUserInfo',userInfo.userInfo);
					},
					fail: function () {
						uni.showToast({
							title: '用户信息获取失败'
						});
					},
					complete: function () {
						_this.userLoading = false
						_this.$u.route({
							url: 'pages/index/home',
							type:'reLaunch'
						})
					}
				})
			},
			goPageHome(){
				this.$u.route({
					url: 'pages/index/home',
					type:'reLaunch'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.phone-page{
		background-color: #fff;
		height:100%;
		.maskContent{
			width:550rpx;
			margin:0 auto;
			margin-top: 50%;
			background-color: #fff;
			border-radius: 18rpx;
			padding:30rpx 0;
			.maskTitle{
				color:$u-main-color;
				font-size: 36rpx;
				text-align: center;
			}
			.maskWords{
				color:$u-content-color;
				font-size: 32rpx;
				text-align: center;
				margin-top:26rpx;
				margin-bottom: 30rpx;
			}
			.maskBtnBox{
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34rpx;
				text-align: center;
				.maskBtn{
					width:180rpx;
					height:80rpx;
				}
				.maskBtnCancle{
					background: #fff;
					color:$u-type-primary;
					line-height: 80rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
	.phone-content{
		padding:20rpx 48rpx 0;
	}
	.phone-code-box{
		display: flex;
		justify-content:space-between;
		width:100%;
	}
	.code-btn-box{
		/* width:200rpx; */
	}
	.phone-code-btn {
		border-radius: 60rpx;
		height:60rpx;
		width:200rpx;
		line-height: 60rpx;
		text-align: center;
	}
	.getcode-btn{
		border: 2rpx solid $u-type-primary;
		color:$u-type-primary;
	}
	.time-btn,.dis,.codeLoading{
		border: 2rpx solid $u-tips-color;
		color:$u-tips-color;
	}
	.phone-btn-box{
		margin-top:48rpx;
	}
	.phone-login-btn{
		height:92rpx;
		border-radius: 122rpx;
		font-size: 36rpx;
		line-height: 92rpx;
		text-align: center;
		color:#fff;
		background-color: $u-type-primary;
		margin-bottom: 24rpx;
	}
	.phone-login-btn-dis{
		background-color:$u-bg-color;
	}
	.phone-wx-quick{
		text-align: center;
		color:$u-tips-color;
		font-size: 34rpx;
		background: none;
		line-height: 1;
		padding:24rpx 0;
		&:after{
			border: none;
		}
	}
	button.phone-wx-quick[disabled]{
		background: none;
	}
</style>